import React from 'react';
import { Card, Button } from 'antd';
import { FullscreenExitOutlined } from '@ant-design/icons';
import { ModalC, PrimaryC, PrimaryGhostC } from '../../components';

class ModalDemo extends React.Component {
  state = {
    visible1: false,
    visible2: false,
  };

  render() {
    const props1 = {
      visible: this.state.visible1,
      onOk: () => {
        this.setState({ visible1: false });
      },
      onCancel: () => {
        this.setState({ visible1: false });
      },
      title: '默认',
      width: 500,
      okText: '1111',
      confirmLoading: true,
      mask: false,
      closable: false,
    };
    const props2 = {
      visible: this.state.visible2,
      onOk: () => {
        this.setState({ visible2: false });
      },
      onCancel: () => {
        this.setState({ visible2: false });
      },
      title: '无底部操作按钮',
      width: 500,
      footer: null,
      okButtonProps: {
        disabled: true,
      },
    };
    const props3 = {
      visible: this.state.visible3,
      onCancel: () => {
        this.setState({ visible3: false });
      },
      title: '自定义底部按钮',
      width: 500,
      footer: [
        <PrimaryGhostC title='查询' key='1' onClick={() => this.setState({ visible3: false })} />,
        <PrimaryC title='确认' key='2' style={{ marginLeft: '10px' }} onClick={() => this.setState({ visible3: false })} />,
        <PrimaryGhostC title='取消' key='3' style={{ marginLeft: '10px' }} onClick={() => this.setState({ visible3: false })} />,
      ],
      maskClosable: false,
      closeIcon: <FullscreenExitOutlined />,
    };
    return (
      <div>
        <Card title='默认'>
          <PrimaryC
            title='打开模态框'
            style={{ margin: '10px' }}
            onClick={() => {
              this.setState({ visible1: true });
            }}
          />
          <ModalC {...props1}>
            <p>Some contents...</p>
          </ModalC>
        </Card>
        <Card title='无底部操作按钮'>
          <PrimaryC
            title='打开模态框'
            style={{ margin: '10px' }}
            onClick={() => {
              this.setState({ visible2: true });
            }}
          />
          <ModalC {...props2}>
            <p>Some contents...</p>
          </ModalC>
        </Card>
        <Card title='自定义底部按钮'>
          <PrimaryC
            title='打开模态框'
            style={{ margin: '10px' }}
            onClick={() => {
              this.setState({ visible3: true });
            }}
          />
          <ModalC {...props3}>
            <p>Some contents...</p>
          </ModalC>
        </Card>
      </div>
    );
  }
}

export default ModalDemo;
